<template>
  <j-modal
    :visible="visible"
    :title="title"
    :confirmLoading="loading"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-form-model ref="form" :model="model" :rules="rules">
      <a-form-model-item label="菜单名称" prop="menuName">
        <a-input v-model="model.menuName" placeholder="请输入菜单名称"></a-input>
      </a-form-model-item>
      <a-form-model-item v-if="false" label="菜单地址" prop="menuName">
        <a-input v-model="model.menuUrl" placeholder="请输入菜单地址"></a-input>
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>

<script>
import { httpAction } from '@api/manage'
import LowAppMenuType from '../constant/LowAppMenuType'

export default {
  name: 'LowAppLinkModal',
  data() {
    return {
      visible: false,
      loading: false,
      title: '关联',
      // 关联表单绑定值
      model: {
        menuName: '',
        menuUrl: '',
      },
      rules: {
        menuName: [{required: true, message: '菜单名称不能为空！'}],
        menuUrl: [{required: true, message: '菜单地址不能为空！'}]
      },
      url: {
        add: '/online/lowAppMenu/add',
        edit: '/online/lowAppMenu/edit',
        queryById: '/online/lowAppMenu/queryById',
      }
    }
  },
  methods: {
    edit(record) {
      this.model = Object.assign({}, record)
      this.show(record.type, '修改')
    },
    add(type) {
      this.model = {id: '', type, menuName: '', menuUrl: '',}
      this.show(type)
    },
    show(type, before = '') {
      this.visible = true
      this.title = before + '关联' + LowAppMenuType.valueOf(type).name
    },

    close() {
      this.visible = false
    },
    onCancel() {
      this.close()
    },
    // 关联modal确定事件，新增or修改数据
    onOk() {
      this.$refs.form.validate((ok, err) => {
        if (ok) {
          this.loading = true
          let formData = {
            appId: this.$route.params.appId,
            orderNum: 0,
            ...this.model,
          }

          let httpUrl = '', method = ''
          if (!formData.id) {
            httpUrl += this.url.add
            method = 'post'
          } else {
            httpUrl += this.url.edit
            method = 'put'
          }
          httpAction(httpUrl, formData, method).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.close()
              this.$emit('ok')
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => this.loading = false)
        }
      })
    },

  },
}
</script>

<style scoped>

</style>